! function($) {
    // 1.表单验证
    // 设置四个标记分别记录四个表单的输入情况，注意不能使用一个，放置不按照顺序进行注册。
    let usernameFlag = false;
    let telFlag = false;
    let passwordFlag = false;
    let repassFlag = false;
    $('.submit')[0].disabled = true; //禁用按钮
    // 用户名
    $('.username').on('focus', function() {
        $('.checkspan').eq(0).css('color', '#333').html('设置后不可更改，中英文均可，最长14个英文或7个汉字');
    });
    $('.username').on('blur input', function() {
        if ($(this).val() !== '') {
            let len = $(this).val().replace(/[\u4e00-\u9fa5]/g, '**').length;
            if (len <= 14) {
                let reg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
                if (reg.test($(this).val())) {
                    //用户名可以使用
                    $('.checkspan').eq(0).css('color', 'green').html('√');
                    usernameFlag = true;
                } else {
                    $('.checkspan').eq(0).css('color', 'red').html('格式有误');
                    usernameFlag = false;
                }

            } else {
                $('.checkspan').eq(0).css('color', 'red').html('用户名长度有问题');
                usernameFlag = false;
            }
        } else {
            $('.checkspan').eq(0).css('color', 'red').html('用户名不能为空');
            usernameFlag = false;
        }
        check()
    });

    // 2.利用ajax将用户名传给后端，根据后端返回的结果确定用户名是否重名
    // 失去焦点，将用户名传递给后端
    $('.username').on('blur', function() {
        if (usernameFlag) {
            $.ajax({ //$.ajax:jquery下面ajax的方法
                method: 'post',
                url: 'http://localhost/JS2112/projectname/php/reg.php',
                data: {
                    user: $('.username').val() //val:相当于原生js里面表单的value
                }
            }).then(function(d) {
                if (d === 'true') { //用户名已存在
                    $('.checkspan').eq(0).html('该用户名已存在').css('color', 'red');
                    usernameFlag = false;
                } else { //不存在
                    $('.checkspan').eq(0).html('√').css('color', 'green');
                    usernameFlag = true;
                }
                check();
            });
        }
    })

    //2.手机号码
    //匹配规则：正确的手机号码。
    $('.tel').on('focus', function() {
        $('.checkspan').eq(3).css('color', '#333').html('请输入正确的手机号码')
    });

    $('.tel').on('blur input', function() {
        if ($(this).val() !== '') {
            let reg = /^1[3578]\d{9}$/;
            if (reg.test($(this).val())) {
                $('.checkspan').eq(3).css('color', 'green').html('√');
                telFlag = true;
            } else {
                $('.checkspan').eq(3).css('color', 'red').html('手机号码格式有误')
                telFlag = false;
            }
        } else {
            $('.checkspan').eq(3).css('color', 'red').html('手机号码不能为空');
            telFlag = false;

        }
        check()
    });


    //3.密码
    //匹配规则：数字字母特殊符号组成，两种以上的字符，弱中强的判断。
    //长度8-14个字符，数字字母特殊符号组成，两种以上的字符，不允许有中文和空格
    //弱:一种字符
    //中:二种或者三种字符
    //强:四种字符
    $('.password').on('focus', function() {
        $('.checkspan').eq(1).css('color', '#333').html('长度8-14个字符，数字字母特殊符号组成，两种以上的字符')
    });


    //oninput:文本框内容发生改变触发,高频事件。
    //测试弱中强

    $('.password').on('input', function() {
        let reg1 = /\d+/; //匹配数字
        let reg2 = /[a-z]+/; //匹配小写字母
        let reg3 = /[A-Z]+/; //匹配大写字母
        let reg4 = /[\W\_]+/; //匹配特殊符号
        let count = 0;
        if (reg1.test($(this).val())) { //存在数字
            count++;
        }

        if (reg2.test($(this).val())) { //存在小写字母
            count++;
        }

        if (reg3.test($(this).val())) { //存在大写字母
            count++;
        }

        if (reg4.test($(this).val())) { //存在特殊符号
            count++;
        }

        //根据count的值判断弱中强
        switch (count) {
            case 1:
                $('.checkspan').eq(1).css('color', 'red').html('必须两种以上的字符');
                passwordFlag = false;
                break;
            case 2:
            case 3:
                $('.checkspan').eq(1).css('color', 'orange').html('中')
                passwordFlag = true;
                break;
            case 4:
                $('.checkspan').eq(1).css('color', 'green').html('强')
                passwordFlag = true;
                break;
        }
        check()
    });

    $('.password').on('blur', function() {
        if ($(this).val() !== '') {
            if ($(this).val().length >= 8 && $(this).val().length <= 14) {
                if (passwordFlag) {
                    $('.checkspan').eq(1).css('color', 'green').html('√')
                }
            } else {
                $('.checkspan').eq(1).css('color', 'red').html('密码长度有问题');
                passwordFlag = false;
            }
        } else {
            $('.checkspan').eq(1).css('color', 'red').html('密码不能为空')
            passwordFlag = false;
        }
        check()
    })

    //4.密码重复 - 和正则没有关系
    $('.repass').on('focus', function() {
        $('.checkspan').eq(2).css('color', '#333').html('请再输入密码')
    });

    $('.repass').on('blur input', function() {
        if ($(this).val() !== '') {
            if ($(this).val() === $('.password').val()) {
                $('.checkspan').eq(2).css('color', 'green').html('√')
                repassFlag = true;
            } else {
                $('.checkspan').eq(2).css('color', 'red').html('两次密码不一致')
                repassFlag = false;
            }
        } else {
            $('.checkspan').eq(2).css('color', 'red').html('密码重复不能为空')
            repassFlag = false;
        }
        check()
    });

    //控制注册按钮是否可用。
    function check() {
        if (usernameFlag && telFlag && passwordFlag && repassFlag) {
            $('.submit')[0].disabled = false; //禁用按钮
        } else {
            $('.submit')[0].disabled = true; //禁用按钮
        }
    }


    // 3.利用表单提交数据 - 没有js代码

}(jQuery);